<template>
  <div class="container-fluid padding-0">
    <div class="row login">
      <div class="col-xs-4 col-md-4 .col-sm-4 col-md-offset-1 col-xs-offset-1 col-md-offset-1">
        <img src="static/img/login-head.png" alt="" width="100%">
      </div>
    </div>  
    <div class="row login-one">
      <div class="col-xs-5 col-md-5 .col-sm-5 col-md-offset-7 col-xs-offset-7 col-sm-offset-7">
        <form method="post">
          <div class="login-two">
            <div class="login-ipt">
              <img src="static/img/yhm.png" alt="" width="50">
              <input type="text" name="userid" placeholder="账号" v-model="userid">
              <br>
              <img src="static/img/mm.png" alt="" width="50">
              <input type="password" name="pwd" placeholder="密码" v-model="pwd">
            </div>
            <label class="login-ckb"><input name="isKeep" type="checkbox" value="1" v-model="remember" />记住用户名</label> 
            <a @click="submit()" title="">登    录</a>
          </div>
        </form>
      </div>
    </div>
    <p class="login-p">技术支持：吉林省联宇合达科技有限公司</p> 
  </div>
</template>



<script>
  import router from '@/router/index.js'
  import base from '@/service/Base.vue'
  import axios from 'axios'

  export default {
    name: 'Login',
    data: function () {
      return {
        remember: 0,
        userid: 'test',
        pwd: '123456'
      }
    },
    computed: {
      md5Pwd: function () {
        return window.CryptoJS.MD5(this.pwd).toString().toUpperCase()
      }
    },
    methods: {
      submit: function () {
        console.log('submit')
        this.doLogin(this.userid, this.md5Pwd)
      },
      doLogin: function (userId, pwd) {
        var $this = this
        function login () {
          return $this.$http.post('/api/hedacmdreq', {method: 'UserLogin', userid: userId, pwd: pwd}).then(response => {
            var body = response.data.HedaACK.Body
            if (body.retCode === '0') {
              return {
                email: body.email,
                mobile: body.mobile,
                telephone: body.telephone,
                userid: body.userid,
                username: body.username
              }
            } else {
              return false
            }
          })
        }
        function getUserRole () {
          return $this.$http.post('/api/hedacmdreq', {method: 'UserRole', userid: userId}).then(response => {
            var body = response.data.HedaACK.Body
            console.log('body', body)
            if (body.retCode === '0') {
              return body.rolelist || []
            } else {
              return false
            }
          })
        }
        // 统一请求，处理，必须要等2个请求全完成才能开始处理该数据
        axios.all([login(), getUserRole()]).then(axios.spread((user, userRole) => {
          if (user && userRole) {
            user.roleList = userRole
            if (this.remember === 1) {
              user.pwd = this.md5Pwd
              window.duang.setData('user', user)
            }
            base.user = user
            window.duang.msg(true, '登录成功！')
            router.push({ name: 'Index' })
          }
        }))
      }
    }
  }
</script>
